<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医生叫号管理 - 医院排队叫号系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .main-content {
            padding: 40px;
        }

        .control-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }

        .panel-section {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            border-left: 5px solid #4facfe;
        }

        .panel-section h3 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.3em;
        }

        .current-patient {
            text-align: center;
            padding: 20px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .queue-number {
            font-size: 3em;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .patient-name {
            font-size: 1.5em;
            color: #666;
        }

        .action-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 20px;
        }

        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-success {
            background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
            color: white;
        }

        .btn-warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .queue-list {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
        }

        .queue-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: white;
            margin-bottom: 10px;
            border-radius: 8px;
            border-left: 4px solid #4facfe;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .queue-item:last-child {
            margin-bottom: 0;
        }

        .queue-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .queue-badge {
            background: #4facfe;
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-weight: bold;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 10px;
            text-align: center;
        }

        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            border-radius: 8px;
            color: white;
            font-weight: bold;
            z-index: 1000;
            transform: translateX(400px);
            transition: transform 0.3s ease;
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification.success {
            background: #28a745;
        }

        .notification.error {
            background: #dc3545;
        }

        @media (max-width: 768px) {
            .control-panel {
                grid-template-columns: 1fr;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .queue-item {
                flex-direction: column;
                text-align: center;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>医生叫号管理</h1>
            <p>实时管理患者排队，高效叫号服务</p>
        </div>

        <div class="main-content">
            <div class="control-panel">
                <div class="panel-section">
                    <h3>当前就诊</h3>
                    <div class="current-patient">
                        <div class="queue-number" id="currentQueueNumber">无</div>
                        <div class="patient-name" id="currentPatientName">暂无患者</div>
                    </div>
                    <div class="action-buttons">
                        <button class="btn btn-primary" onclick="callNext()">叫下一位</button>
                        <button class="btn btn-success" onclick="completeCurrentPatient()">完成就诊</button>
                    </div>
                </div>

                <div class="panel-section">
                    <h3>排队统计</h3>
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-number" id="waitingCount">0</div>
                            <div class="stat-label">等待人数</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number" id="completedCount">0</div>
                            <div class="stat-label">已完成</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel-section">
                <h3>等待队列</h3>
                <div class="queue-list" id="queueList">
                    <div style="text-align: center; color: #666; padding: 20px;">
                        暂无等待患者
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentPatient = null;
        let waitingQueue = [];

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadCurrentStatus();
            loadQueueStats();
            loadWaitingQueue();
            
            // 每30秒自动刷新
            setInterval(() => {
                loadCurrentStatus();
                loadQueueStats();
                loadWaitingQueue();
            }, 30000);
        });

        // 加载当前状态
        async function loadCurrentStatus() {
            try {
                const response = await fetch('/api/queue/current');
                const data = await response.json();
                
                document.getElementById('currentQueueNumber').textContent = data.current.queueNumber;
                document.getElementById('currentPatientName').textContent = data.current.patientName;
                document.getElementById('waitingCount').textContent = data.waiting;
                
                currentPatient = data.current;
            } catch (error) {
                console.error('加载当前状态失败:', error);
            }
        }

        // 加载排队统计
        async function loadQueueStats() {
            try {
                const response = await fetch('/api/queue/stats');
                const data = await response.json();
                
                document.getElementById('completedCount').textContent = data.today.completed;
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        }

        // 加载等待队列
        async function loadWaitingQueue() {
            try {
                const response = await fetch('/api/queue/waiting');
                const data = await response.json();
                
                const queueList = document.getElementById('queueList');
                
                if (data.length === 0) {
                    queueList.innerHTML = '<div style="text-align: center; color: #666; padding: 20px;">暂无等待患者</div>';
                    return;
                }
                
                queueList.innerHTML = data.map(patient => `
                    <div class="queue-item">
                        <div class="queue-info">
                            <span class="queue-badge">${patient.queueNumber}</span>
                            <div>
                                <strong>${patient.patientName}</strong><br>
                                <small>电话: ${patient.patientPhone}</small>
                            </div>
                        </div>
                        <div>
                            <button class="btn btn-warning" onclick="callSpecificPatient('${patient.queueNumber}')">
                                直接叫号
                            </button>
                        </div>
                    </div>
                `).join('');
                
                waitingQueue = data;
            } catch (error) {
                console.error('加载等待队列失败:', error);
                document.getElementById('queueList').innerHTML = '<div style="text-align: center; color: #666; padding: 20px;">加载失败，请刷新页面</div>';
            }
        }

        // 叫下一位患者
        async function callNext() {
            try {
                const response = await fetch('/api/queue/call-next', {
                    method: 'POST'
                });
                
                const data = await response.json();
                
                if (data.success) {
                    showNotification('成功叫号: ' + data.queueNumber, 'success');
                    loadCurrentStatus();
                    loadWaitingQueue();
                } else {
                    showNotification(data.message || '叫号失败', 'error');
                }
            } catch (error) {
                console.error('叫号失败:', error);
                showNotification('叫号失败，请重试', 'error');
            }
        }

        // 完成当前患者就诊
        async function completeCurrentPatient() {
            if (!currentPatient || currentPatient.queueNumber === '无') {
                showNotification('当前没有就诊患者', 'error');
                return;
            }

            try {
                const response = await fetch('/api/queue/complete', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: 'queueNumber=' + encodeURIComponent(currentPatient.queueNumber)
                });
                
                const data = await response.json();
                
                if (data.success) {
                    showNotification('患者就诊完成', 'success');
                    loadCurrentStatus();
                    loadQueueStats();
                } else {
                    showNotification(data.message || '操作失败', 'error');
                }
            } catch (error) {
                console.error('完成就诊失败:', error);
                showNotification('操作失败，请重试', 'error');
            }
        }

        // 直接叫指定患者
        async function callSpecificPatient(queueNumber) {
            try {
                const response = await fetch('/api/queue/call-specific', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: 'queueNumber=' + encodeURIComponent(queueNumber)
                });
                
                const data = await response.json();
                
                if (data.success) {
                    showNotification('成功叫号: ' + queueNumber, 'success');
                    loadCurrentStatus();
                    loadWaitingQueue();
                } else {
                    showNotification(data.message || '叫号失败', 'error');
                }
            } catch (error) {
                console.error('叫号失败:', error);
                showNotification('叫号失败，请重试', 'error');
            }
        }

        // 显示通知
        function showNotification(message, type) {
            // 移除现有通知
            const existingNotification = document.querySelector('.notification');
            if (existingNotification) {
                existingNotification.remove();
            }

            // 创建新通知
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.textContent = message;
            document.body.appendChild(notification);

            // 显示通知
            setTimeout(() => {
                notification.classList.add('show');
            }, 100);

            // 3秒后隐藏通知
            setTimeout(() => {
                notification.classList.remove('show');
                setTimeout(() => {
                    notification.remove();
                }, 300);
            }, 3000);
        }
    </script>
</body>
</html>